<template>
  <div>
    <h2 class="title">传感器状态</h2>
    <ul class="list">
      <li v-for="s in sensors" :key="s.name" :class="s.ok ? 'ok' : 'bad'">
        <span>{{ s.name }}</span>
        <strong>{{ s.ok ? '正常' : (s.message || '异常') }}</strong>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useDataStore } from '../stores/dataStore';
import type { SensorStatusItem } from '../types';

const store = useDataStore();
const sensors = computed<SensorStatusItem[]>(() => {
  const r = store.latest;
  if (!r) return [];
  return [
    { name: '浊度传感器', ok: r.turbidityNTU >= 0 && r.turbidityNTU < 1000 },
    { name: '流量计', ok: r.flowLMin > 0 },
    { name: '压力传感器', ok: r.pressureKPa > 0 },
    { name: '水泵转速反馈', ok: r.pumpRpm > 0 },
    { name: '变频器', ok: r.inverterHz >= 0 && r.inverterHz <= 60 },
    { name: '阀门执行器', ok: r.valveOpenPct >= 0 && r.valveOpenPct <= 100 },
  ];
});
</script>

<style scoped>
.title { margin: 0 0 8px; font-size: 16px; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.list li { display: flex; justify-content: space-between; padding: 8px; border-radius: 8px; border: 1px solid #e5e7eb; background: #fafafa; }
.list li.ok { border-color: #10b981; background: #ecfdf5; }
.list li.bad { border-color: #ef4444; background: #fef2f2; }
</style>



